<template>
    <div class="flow">
        <!-- 这是流程步骤图 -->
        <div class="flow-wrapper" v-if="flowInfo">
            <div class="flow-line"></div>
            <ul class="flow-ul">
                <li class="item" v-for="item in flowInfo" v-if="item.id>0">
                    <div class="dot" :class="{'active': item.id<=currentFlow}"></div>
                    <div class="text" :class="{'active': item.id<=currentFlow}">{{item.title}}</div>
                </li>
            </ul>
            <div class="desc" v-for="item in flowInfo" v-if="item.id==currentFlow">
                <i class="icon iconfont icon-prompt_fill"></i>{{item.desc}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    props: {
        flowInfo: {
            type: Array,
            default: []
        },
        currentFlow: {
            type: Number,
            default: 1
        }
    },
    created() {

    }
}
</script>
<style  lang="less" scoped>
@import "../../common/less/variable.less";
    .flow{
        .flow-wrapper{
            padding-top:17px;
            .flow-ul{
                display:flex;
                .item{
                    flex:1;
                    text-align:center;
                    position:relative;
                    .dot{
                        width:8px;
                        height:7px;
                        border-radius:4px;
                        border:1px solid @color-alert-gray;
                        margin-bottom:5px;
                        background:@color-alert-gray;
                        position:absolute;
                        top:-15px;
                        left:50%;
                        transform: translateX(-50%);
                        z-index:10;
                        &.active{
                            border:1px solid #333;
                            background:#333;
                        }
                    }
                    .text{
                        font-size:12px;
                        color:@color-alert-gray;
                        position:relative;
                        &.active{
                            color:#333;
                        }
                        &:before{
                            content:'';
                            display:block;
                            width:100%;
                            border-top:1px solid @color-alert-gray;
                            position:absolute;
                            top:-11px;
                            left:50%;
                            z-index:9;
                            &:last-child{
                                display:none;
                            }
                        }
                        
                    }
                    &:last-child{
                        .text{
                            &:before{
                                display:none;
                            }
                        }
                        
                    }
                }
            }
            .desc{
                font-size:10px;
                margin-top:12px;
                text-align:center;
                color:@color-alert-title;
                i{
                    font-size:12px;
                    color:@color-red;
                }
            }
        }
    }
</style>
